<template>
	<view class='cs-switch-box'>
		<view class='cs-switch-wrapper'>
			<view :class='labelclickflag?"cor-b":""' class='cs-switch-title' v-if='type=="list"' @click="clickLabel">{{title}}</view>
			<view class='cs-switch-toggle' v-if='type=="list"'>
				<block v-if='checked'>
					<switch checked :color="setting.corb" style="transform:scale(0.7)" class='switch-toggle' @change='switchToggle'/>
				</block>
				<block v-else>
					<switch :color="setting.corb" style="transform:scale(0.7)" class='switch-toggle' @change='switchToggle'/>
				</block>
			</view>
			<view class='cs-switch-center' v-if='type=="single"'>
				<block v-if='checked'>
					<switch checked :color="setting.corb" style="transform:scale(1)" class='switch-toggle' @change='switchToggle'/>
				</block>
				<block v-else>
					<switch :color="setting.corb" style="transform:scale(1)" class='switch-toggle' @change='switchToggle'/>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import audio from '@/lib/audio.js';
	import gui from '@/lib/gui.js';
	
	export default {
		name:"csbtn",
		props: {
			type: {
				type: String,
				default: 'single',
				required: true,
				validator: function(value) {
					if(value == 'list' || value == 'single'){
						return true;
					}else{
						return false;
					}
				}
			},
			title: {
				type: String,
				default: ''
			},
			checked: {
				type: Boolean,
				default: false
			},
			labelclickflag:{
				type: Boolean,
				default: false
			},
			param: {
				type: Object
			}
		},
		created(){
			gui.init(this);
		},
		mounted(){
			
		},
		data() {
			return {
				setting: []
			};
		},
		methods:{
			clickLabel(e){
				audio.playClick();
				if(this.param == null){
					this.param={checked: e.detail.value};
				}else{
					this.param.checked=e.detail.value;
				}
				this.$emit('labelclick', this.param);
			},
			switchToggle(e){
				audio.playClick();
				if(this.param == null){
					this.param={checked: e.detail.value};
				}else{
					this.param.checked=e.detail.value;
				}
				this.$emit('method', this.param);
			}
		}
	}
</script>

<style>

	.cs-switch-box{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.cs-switch-wrapper{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.cs-switch-title{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		width: 50%;
	}
	
	.cs-switch-toggle{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
		width: 50%;
	}
	
	.cs-switch-center{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	
	.switch-toggle{
		
	}
</style>